<template>
  <div>
    <ul class="leftUl">
      <li
        v-for="(item, idx) in leftData"
        :key="idx"
        :class="{ currentLi: currentLeft == idx }"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "leftNav",
  data() {
    return {
      currentLeft: 1,
      leftData: [
        {
          name: "文玩",
          path: "",
        },
        {
          name: "首饰",
          path: "",
        },
        {
          name: "服饰",
          path: "",
        },
        {
          name: "家居",
          path: "",
        },
        {
          name: "玩具",
          path: "",
        },
        {
          name: "艺术品",
          path: "",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.leftUl {
  width: 0.92rem;
  height: calc(100vh - 0.83rem);
  background: #f0f0f0;
  color: #999999;
  font-size: 0.14rem;
  li {
    height: 0.59rem;
    line-height: 0.59rem;
    position: relative;
    text-align: center;
  }
  .currentLi {
    background: #fafafa;
    color: #1b7373;
    font-weight: bold;
  }
  .currentLi::before {
    content: "";
    width: 0.02rem;
    height: 0.2rem;
    background: #1b7373;
    position: absolute;
    left: 0;
    top: 0.2rem;
  }
}
</style>